<!DOCTYPE html>
<html lang="en">
<head xmlns:th="http://www.thymeleaf.org">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-3.6.0.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>

</head>
<body>
<div class="container-fluid">
    <div class="search-container">
        <form id="searchForm" th:action="@{/list}" method="post">
            <input type="text" id="id" name="name" value="" placeholder="请输入学生姓名">
            <button class="btn btn-default" type="submit">查询</button>
        </form>
    </div>
    <!--    <form class="form-inline">-->
    <!--        <div class="form-group">-->
    <!--            <label for="name">姓名</label>-->
    <!--            <input type="text" class="form-control" id="name" placeholder="请输入姓名">-->
    <!--        </div>-->
    <!--        <button type="submit" class="btn btn-default">查询</button>-->
    <!--    </form>-->
    <!--    <table class="table table-bordered">-->
    <!--    <table class="table table-striped">-->
    <table class="table table-hover">
        <thead>
        <tr>
            <th>#</th>
            <th>姓名</th>
            <th>性别</th>
            <th>成绩</th>
        </tr>
        </thead>
        <tbody id="studentTb">
        <!--        <tr data-th-each="student : ${data}">-->
        <!--            <th scope="row" data-th-text="${student.id}"></th>-->
        <!--            <td data-th-text="${student.name}">Mark</td>-->
        <!--            <td data-th-text="${student.sex}? 男 : 女">Otto</td>-->
        <!--            <td data-th-text="${student.score}">@mdo</td>-->
        <!--        </tr>-->
        </tbody>
    </table>
</div>
<script type="text/javascript">
    // $(function (){
    //     $.ajax({
    //         url:"/webapi/student/list"
    //     }).done(function (rs){
    //         var len = rs.length;
    //         var html="";
    //         for (var i = 0; i < len; i++) {
    //             var item = rs[i];
    //             html+="<tr>"
    //                 +"<td>"+item.id+"</td>"
    //                 +"<td>"+item.name+"</td>"
    //                 +"<td>"+item.sex+"</td>"
    //                 +"<td>"+item.score+"</td>"
    //             +"</tr>";
    //         }
    //         $("#studentTb").html(html);
    //     })
    // })

    $(function (){
        $.ajax({
            url:"/webapi/student/list"
        }).done(function (rs){
            var len = rs.length;
            var html = "";
            for (var i = 0; i < len; i++) {
                var item=rs[i];
                html+="<tr>"
                    +"<td>"+item.id+"</td>"
                    +"<td>"+item.name+"</td>" +"<td>"+item.sex+"</td>"
                    +"<td>"+item.score+"</td>"
                    +"</tr>";
            }
            $("#studentTb").html(html);
        })
    })
</script>
</body>
</html>